<template>
  <Select
    allowClear
    show-search
    :default-active-first-option="false"
    :show-arrow="false"
    :filter-option="false"
    :not-found-content="null"
    :value="state.value"
    :options="state.data"
    @search="searchFn"
  />
</template>

<script setup lang="ts">
import { Select } from 'ant-design-vue';
import { reactive } from 'vue';
const props = defineProps<{
  fetchData: (value) => Promise<Array<{ label; value }>>;
}>();

/**
 * search
 */
const state: {
  value: string;
  data: Array<{ label; value }>;
} = reactive({
  value: '',
  data: [],
});

const searchFn = async (value) => {
  if (!value) return;
  state.data = await props.fetchData(value);
};
</script>

<style scoped lang="less"></style>
